import React, {useState} from 'react';
import Layout from 'components/Layout';
import {TopTab} from 'view/Statistics/TopTab';
import {Accounts} from './Statistics/Accounts';
import {Trends} from './Statistics/Trends';
import styled from 'styled-components';

const MyLayout = styled(Layout)`
  display: flex;
  flex-direction: column;
`;

const ContentWrapper = styled.div`
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
`

type Props = {
  className?: string;
}

function Statistics(props: Props) {
  const [selected, setSelected] = useState('account');

  const onClickTab = (value: string) => {
    setSelected(value);
  };

  const mainContent = () => {
    return (selected === 'account') ?
      <Accounts/> : <Trends/>;
  };
  return (
    <MyLayout className={props.className}>
      <TopTab value={selected} onClick={onClickTab}/>
      <ContentWrapper className="scroll">
        {mainContent()}
      </ContentWrapper>
    </MyLayout>
  );
}

export default Statistics;